<!--移交网络 -->
<template>
  <div class="content">
    <span class="leftLabel">{{ $t('groupOperate.hdlname') }}</span>
    <div class="rightContent">
      <a-radio-group
        :value="tabType"
        button-style="solid"
        @change="tabTypeChange"
      >
        <a-radio-button value="myJoin">
          {{ $t('groupOperate.hdltipname') }}
        </a-radio-button>
        <a-radio-button value="otherAccount">{{
          $t('groupOperate.hdlnamedetail')
        }}</a-radio-button>
      </a-radio-group>
      <div class="myJoinContent" v-if="tabType == 'myJoin'">
        <a-radio-group :value="selectOrg" @change="changeOrg">
          <a-radio
            v-for="item in orgList"
            :value="item.id"
            :key="item.id"
            name="orgItem"
            class="orgItem"
            :disabled="item.isCurrent"
          >
            {{ item.name }}
            {{ item.isCurrent ? $t('groupOperate.nowname') : '' }}
          </a-radio>
        </a-radio-group>
      </div>
      <div class="otherAccountContent" v-if="tabType == 'otherAccount'">
        <p class="accountHint">
          {{ $t('groupOperate.hdlreadname') }}
        </p>
        <div class="searchAccountBox">
          <span class="span-label">
            {{ $t('groupOperate.hdlreadnamedetail') }}</span
          >
          <a-select
            :showSearch="true"
            label-in-value
            :showArrow="false"
            :defaultActiveFirstOption="false"
            :filterOption="false"
            :value="account"
            :placeholder="$t('groupOperate.hdldate')"
            :notFoundContent="
              fetching ? undefined : $t('groupOperate.hdldatachange')
            "
            @search="fetchUser"
            @change="selectChange"
            class="accountSelect"
          >
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            <a-select-option v-for="d in accountList" :key="d.tenantId">
              {{ d.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { maccApi, requestHttp } from '@utils/index';
import { RjModal } from '@components';
import { mapState } from 'vuex';
import lodash from 'lodash';
export default {
  name: 'turnoverNet',
  props: {
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    this.fetchUser = lodash.debounce(this.fetchUser, 800);
    return {
      tabType: 'myJoin',
      orgList: [],
      selectOrg: null,
      account: undefined,
      fetching: false,
      accountList: [],
      currentOrg: null,
      currentUserId: null,
    };
  },

  components: {},

  computed: {
    ...mapState('User', ['userInfo']),
    ...mapState('Group', ['groupId']),
  },

  mounted() {
    this.getOwnOrg();
  },

  watch: {},

  methods: {
    //获取我加入的组织列表
    async getOwnOrg() {
      this.fetching = true;
      const { code, msg, tenants } = await requestHttp({
        api: `${maccApi.GET_SELE_ORG_LIST_API}`,
        method: 'GET',
      });
      this.fetching = false;
      if (code == 0) {
        console.log(tenants);
        this.orgList = tenants.filter((item) => {
          if (item.isCurrent) {
            this.currentOrg = item.id;
          }
          return item.userType != 'SHARE'; //过滤掉分享者
        });
      } else {
        this.$message.error(msg || this.$t('groupOperate.addlist'));
      }
    },
    //搜索获取用户列表
    async fetchUser(val) {
      if (val == '') return;
      const { msg, code, accounts } = await requestHttp({
        api: maccApi.SEARCH_ACCOUNT_API,
        method: 'GET',
        querys: {
          account: val,
          type: 'ROOT',
        },
      });
      if (code == 0) {
        const list = [];
        accounts.forEach((item) => {
          if (item.tenantId != this.currentOrg) {
            list.push({
              text: `${item.account}-${item.tenantName}`,
              value: item.accountId,
              tenantId: item.tenantId,
            });
          }
        });
        this.accountList = list;
      } else {
        this.$message.error(msg || this.$t('groupOperate.search'));
      }
    },
    //切换tab
    tabTypeChange(e) {
      this.tabType = e.target.value;
    },

    selectChange(value) {
      this.currentUserId = this.accountList.find((item) => {
        return item.tenantId == value.key;
      }).value;
      Object.assign(this, {
        account: value,
        accountList: [],
        fetching: false,
      });
    },

    changeOrg(e) {
      this.selectOrg = e.target.value;
    },

    sendTurnover() {
      const that = this;

      return new Promise((resolve) => {
        const { selectOrg, account } = this;
        if (!selectOrg && (!account || !account.key)) {
          this.$message.info(this.$t('groupOperate.tip2'));
          resolve({
            success: false,
          });
          return;
        }
        RjModal.confirm({
          title: this.$t('groupOperate.tip'),
          content: this.$t('groupOperate.commovenet'),
          async onOk() {
            const { groupId } = that.groupInfo;
            const { accountId } = that.userInfo;
            debugger;
            const params = {
              groups: [groupId],
            };
            if (that.tabType == 'myJoin') {
              params.userId = accountId;
              params.tenantId = that.selectOrg;
            } else {
              params.userId = that.currentUserId;
              params.tenantId = that.account.key;
            }
            const { code, msg } = await requestHttp({
              api: `${maccApi.HAND_OVER_GROUP_API}`,
              method: 'POST',
              params: params,
            });
            if (code == 0) {
              resolve({
                success: true,
              });
            } else {
              that.$message.error(msg || this.$t('groupOperate.movenetfail'));
              resolve({
                success: false,
              });
            }
          },
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 100%;
  .leftLabel {
    min-width: 120px;
    margin-top: 5px;
    margin-right: 10px;
  }
  .rightContent {
    flex: 1;
    box-sizing: border-box;
    text-align: left;
    width: 0;
    .myJoinContent {
      flex: 1;
      overflow: auto;
      .orgItem {
        display: block;
        height: 30px;
        line-height: 30px;
      }
      margin-top: 10px;
    }
    .otherAccountContent {
      .accountHint {
        margin: 10px;
        color: #ffcb7d;
      }
      .searchAccountBox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .accountSelect {
          // width: 100%;
          flex: 1;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
